<template>
  <div class="settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="网站名称">
              <el-input v-model="basicSettings.siteName" />
            </el-form-item>
            <el-form-item label="网站描述">
              <el-input 
                v-model="basicSettings.siteDescription" 
                type="textarea" 
                rows="3"
              />
            </el-form-item>
            <el-form-item label="网站Logo">
              <el-upload
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
              >
                <img v-if="basicSettings.logo" :src="basicSettings.logo" class="avatar">
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="basicSettings.contactPhone" />
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicSettings.contactEmail" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="密码最小长度">
              <el-input-number 
                v-model="securitySettings.passwordMinLength" 
                :min="6" 
                :max="20"
              />
            </el-form-item>
            <el-form-item label="密码复杂度">
              <el-select v-model="securitySettings.passwordComplexity">
                <el-option label="低" value="low" />
                <el-option label="中" value="medium" />
                <el-option label="高" value="high" />
              </el-select>
            </el-form-item>
            <el-form-item label="登录失败限制">
              <el-input-number 
                v-model="securitySettings.loginAttempts" 
                :min="3" 
                :max="10"
              />
            </el-form-item>
            <el-form-item label="会话超时时间">
              <el-input-number 
                v-model="securitySettings.sessionTimeout" 
                :min="30" 
                :max="240"
              />
              <span class="unit">分钟</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="支付设置" name="payment">
          <el-form :model="paymentSettings" label-width="120px">
            <el-form-item label="支付宝配置">
              <el-input v-model="paymentSettings.alipayAppId" placeholder="AppID" />
              <el-input 
                v-model="paymentSettings.alipayPrivateKey" 
                type="textarea" 
                rows="3"
                placeholder="私钥"
                class="mt-2"
              />
            </el-form-item>
            <el-form-item label="微信支付配置">
              <el-input v-model="paymentSettings.wechatPayMchId" placeholder="商户号" />
              <el-input 
                v-model="paymentSettings.wechatPayKey" 
                type="textarea" 
                rows="3"
                placeholder="API密钥"
                class="mt-2"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="actions">
        <el-button type="primary" @click="handleSave">保存设置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'Settings',
  components: {
    Plus
  },
  setup() {
    const activeTab = ref('basic')

    // 基本设置
    const basicSettings = ref({
      siteName: '健康养生平台',
      siteDescription: '提供专业的健康养生服务和知识分享',
      logo: '',
      contactPhone: '400-123-4567',
      contactEmail: 'support@example.com'
    })

    // 安全设置
    const securitySettings = ref({
      passwordMinLength: 8,
      passwordComplexity: 'medium',
      loginAttempts: 5,
      sessionTimeout: 120
    })

    // 支付设置
    const paymentSettings = ref({
      alipayAppId: '',
      alipayPrivateKey: '',
      wechatPayMchId: '',
      wechatPayKey: ''
    })

    const handleLogoSuccess = (res) => {
      basicSettings.value.logo = res.url
    }

    const handleSave = () => {
      // 这里应该调用API保存设置
      console.log('保存设置:', {
        basic: basicSettings.value,
        security: securitySettings.value,
        payment: paymentSettings.value
      })
    }

    return {
      activeTab,
      basicSettings,
      securitySettings,
      paymentSettings,
      handleLogoSuccess,
      handleSave
    }
  }
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.actions {
  margin-top: 20px;
  text-align: center;
}

.unit {
  margin-left: 8px;
  color: #666;
}

.mt-2 {
  margin-top: 8px;
}
</style> 